import React from 'react';
import { Input, Form, } from "antd"

import Cascader from '@/components/Cascader';
import UploadURL from "@/components/UploadURL"

type Form = {
    code: string;
    merchant: string;
    address: string;
    name: string;
    phone: string;
    uploadUrl: string;
}

interface FormItemProps {
    form: Form;
    setForm: React.Dispatch<React.SetStateAction<{
        code: string;
        merchant: string;
        address: string;
        name: string;
        phone: string;
        uploadUrl: string;
    }>>
}

const MerchantForm = (props: FormItemProps) => {
    let { form, setForm } = props;


    return (
        <Form
            style={{ maxWidth: 600 }}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
        >
            <Form.Item label="商户编码" name="code" rules={[{ message: 'Please input!' }]}>
                <div>
                    <Input value={form.code} disabled className='rounded-none' />
                    <span className='text-gray-400 text-xs'>商户唯一标识，由系统生成，无法修改</span>
                </div>
            </Form.Item>

            <Form.Item
                label="商户名称"

                validateDebounce={1000}

                rules={[{ required: true, message: 'Please input!' }]}
            >
                <Input value={form.merchant}
                    className='rounded-none'
                    onChange={(e) => { setForm({ ...form, merchant: e.target.value }) }} />
            </Form.Item>

            <Form.Item
                style={{ display: 'block', position: 'relative' }}
                label="地址"
               
                rules={[{ required: true, message: '' }]}
            >   
                <Cascader 
                    value={form.address} 
                    style={{ width: "94%" }}
                    onChange={(e) => {
                        setForm({ ...form, address: e })
                    }}
                ></Cascader>
            </Form.Item>

            <Form.Item
                label="联系人"

                rules={[{ required: true, message: 'Please input!' }]}
            >
                <Input
                    className='rounded-none'
                    value={form.name} 
                    
                    onChange={(e) => { setForm({ ...form, name: e.target.value }) }} />
            </Form.Item>


            <Form.Item
                label="手机号"
                rules={[{ required: true, message: 'Please input!' }]}
            >
                <Input
                    className='rounded-none'
                    value={form.phone} onChange={(e) => {
                        setForm({ ...form, phone: e.target.value })

                    }} />
            </Form.Item>

            <Form.Item
                label="商家资质上传"
                name="uploadUrl"
            >
                <UploadURL ref='refImg' imgSrc={form.uploadUrl} setForm={setForm} form={form} ></UploadURL>
            </Form.Item>
        </Form>
    );
};

export default MerchantForm;